<template>
    <div class="test-component" :style="testComponentStyle">
        <span>{{dynamicData.text}}</span>
        <span class="test-mark">这是组件1的说明：只能修改文字，不能修改颜色</span>
    </div>
</template>

<script>
    export default {
        name: "TestComponent",
        props: {
            // 父组件传参统一对象
            dataJson: {
                type: Object,
                default: {}
            }
        },
        data() {
            return {
                // 暴露在外的表单属性
                interfaceAttrs: {
                    text: {
                        type: 'String',
                        name: '标题',
                        default: '这是一个测试组件1'
                    }
                },
                // 动态的属性
                dynamicData: {},
                // 组件不可设置的属性
                bgColor: '#5daf34'
            }
        },
        computed: {
            testComponentStyle() {
                return `background-color: ${this.bgColor}`
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            /**
             * 初始化
             * 1、将暴露在外的表单属性转化为组件动态属性
             * 2、将父组件的传参同步到组件中
             */
            init() {
                Object.keys(this.interfaceAttrs).forEach(item => {
                    this.$set(this.dynamicData, item, this.interfaceAttrs[item].default)
                })
                if (this.dataJson && typeof this.dataJson === 'object') {
                    this.dynamicData = {...this.dynamicData, ...this.dataJson}
                }
            },
            // 在父组件调用，用父组件传入的参数更新组件数据
            updateData(data) {
                if (data) {
                    Object.keys(data).forEach(item => {
                        if (this.interfaceAttrs[item]) {
                            // 更新组件自身数据
                            this.dynamicData[item] = data[item]
                            // 同步更新对外参数的值，避免其他组件拿到的还是旧数据
                            this.interfaceAttrs[item].default = data[item]
                        }
                    })
                    this.$forceUpdate()
                }
            },
        }
    }
</script>

<style scoped lang="stylus">
    .test-component {
        width 100%
        height 100%
        color white
        border-radius 5px
        display flex
        justify-content flex-start
        align-items flex-start
        flex-direction column

        span {
            display inline-block

            &.test-mark {
                color red
                font-size 12px
            }
        }
    }
</style>
